<template>
    <div id="app" class="text-black">
        <van-overlay :custom-style="{backgroundColor:'rgba(255,255,255,0.3)'}" :show="loading">
            <div class="flex-row justify-center align-center" style="height: 100%;" @click.stop>
                <van-loading color="#1989fa"/>
            </div>
        </van-overlay>
        <router-view/>
    </div>
</template>
<script>

    import AttachFastClick from "fastclick";
    import {isFunction} from "./utils/helpers";
    import {mapState} from "vuex";

    export default {
        data() {
            return {}
        },
        async created() {
            this.visibilityChange();
        },
        computed:{
            ...mapState(['loading']),
        },
        mounted() {
            // ios双击缩放禁止
            this.prohibitScaling();
            if (isFunction(AttachFastClick)) {
                // ios点击 事件失灵问题
                new AttachFastClick(document.body);
            }

        },

        methods: {
            visibilityChange() {
                document.addEventListener('visibilitychange', () => {
                    if (document.visibilityState === 'visible') { // 解决ios等锁屏导致的socket断线不会重连问题


                    }
                });

            },
            // ios双击缩放禁止
            prohibitScaling() {
                document.addEventListener('touchstart', function (event) {
                    if (event.touches.length > 1) {
                        event.preventDefault();
                    }
                });
                let lastTouchEnd = 0;
                document.addEventListener('touchend', function (event) {
                    let now = (new Date()).getTime();
                    if (now - lastTouchEnd <= 300) {
                        event.preventDefault();
                    }
                    lastTouchEnd = now;
                }, false);
                document.addEventListener('gesturestart', function (event) {
                    event.preventDefault();
                });
            },
        }
    }
</script>
<style lang="scss" scoped>
    #app {
        width: 100%;
        max-width: 760px;
        min-width: 320px;
        min-height: 100vh;
        height: auto;
    }

</style>
